<!DOCTYPE html>
<html lang="cn">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上面3个meta标签*必须*放在最前面 -->
    <link rel="icon" href="__PUBLIC__/images/logo.png" type="image/png" sizes="10x30">
    <title>消息中心</title>

    <!-- Bootstrap -->
    <link href="__PUBLIC__/css/bootstrap.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="./public/js/html5shiv.min.js"></script>
      <script src="./public/js/respond.min.js"></script>
    <![endif]-->
    <link rel="stylesheet" href="__PUBLIC__/my4.css">
    <link rel="stylesheet" href="__PUBLIC__/page.css">
  </head>
  <body>
        <div id="nav">
            <div class="container">
                <div class="row">
                <div id="top1">
                    <ul>
                        <li><a href="<{:U('pers/index')}>"><img src="__PUBLIC__/images/logo.png" width="45" onerror=null;src='__PUBLIC__/Uploads/error.jpg'></a></li>
                        <li>|</li>
                        <li><a href="<{:U('pers/index')}>">个人中心</a></li>
                    </ul>
                </div>
                <div id="top2">
                    <ul>
                        <li><a href="<{:U('pers/index')}>"><{$Think.session.user.name}></a></li>
                        <li><a href="">消息(<{$count}>)</a></li>
                        <li><a href="<{:U('index/index')}>">摆渡首页</a></li>
                    </ul>
                </div>
                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col-md-12" id="box1">
                    <span>消息中心</span>
                </div>
                <div class="col-md-12" id="line"></div>
            </div>
            <div class="row" id="box2">
                <div class="col-md-1" id="btn1">
                    <span>全部消息</span>
                </div>

                <div class="col-md-1" id="btn3">
                    <span>写消息</span>
                </div>
            </div>
            <div class="row" id="box3">
                <div class="col-md-12" id="box4">
                    <if condition="$list eq array()">
                        <span class="glyphicon glyphicon-envelope" id="p1">&nbsp;暂无消息</span>
                    <else />
                        <volist name="list" id="vo">
                            <div class="row" id="box9">
                            <div class="col-md-2"></div>
                            <div class="col-md-8 margin">
                                <div class="col-md-2">
                                    <div id="touxiang">
                                        <img src="<{$vo.path}>" width="50" height="50" onerror=null;src='__PUBLIC__/Uploads/error.jpg'>
                                    </div>
                                </div>
                                <div class="col-md-10">
                                    <div class="row">
                                        <div class="col-md-3">
                                            <span class="p2"><{$vo.name}></span>
                                        </div>
                                        <div class="col-md-3">
                                            <if condition="$vo['status'] eq 1">
                                                <div class="status1">未读</div>
                                            <else />
                                                <div class="status2">已读</div>
                                            </if>
                                        </div>
                                        <div class="col-md-6">
                                            <span class="p4"><{$vo.time}></span>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div class="p1"><{$vo.content}></div>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-8"></div>
                                        <div class="col-md-2">
                                            <span class="p3" name="<{$vo.name}>">回复</span>
                                        </div>
                                        <div class="col-md-2">
                                            <span class="p5" onclick="del(this,<{$vo.id}>)">删除</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-2"></div>
                            </div>
                        </volist>
                    </if>

                    <!-- Modal -->
                            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                              <div class="modal-dialog">
                                <div class="modal-content">
                                  <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                    <h4 class="modal-title" id="myModalLabel">详细内容:</h4>
                                  </div>
                                  <div class="modal-body" id="content">
                                    
                                  </div>
                                  <div class="modal-footer">
                                    <a href="<{:U('news/index')}>" type="button" class="btn btn-default">关闭</a>
                                    
                                  </div>
                                </div>
                              </div>
                            </div><br><br><br>
                            <div class="digg" id="page"><{$page}></div>
                </div>
            </div>
            
            <div class="row" id="box7">
                <div class="col-md-12" id="box8">
                    <div class="col-md-3"></div>
                    <div class="col-md-6">
                        <span>发送消息</span>
                        <form action="<{:U('news/send')}>" method="post">
                          <div class="form-group">
                            <label for="name">用户名:</label>
                            <input type="text" class="form-control" id="name" placeholder="请输入用户名..." name="name">
                          </div>
                          <div class="form-group">
                            <label for="text">消息内容:</label>
                            <textarea class="form-control" rows="3" id="text" name="text" maxlength="100" placeholder="请输入100字以内的消息..."></textarea>
                          </div>
                          <button type="submit" class="btn btn-default btn-primary" id="btn4">发送</button>
                        </form>
                    </div>
                    <div class="col-md-3"></div>
                </div>
            </div>
        </div><!-- end container -->
    
    
    <script src="__PUBLIC__/js/holder.min.js"></script>
    <!-- 此处引入jQuery -->
    <script src="__PUBLIC__/js/jquery.min.js"></script>
    <!-- bootstrap.min.js必须放在JQ后面 -->
    <script src="__PUBLIC__/js/bootstrap.min.js"></script>

    <script type="text/javascript">
        $('#btn1').click(function(){
            $('#btn1').css('background-color','#fff');
            $('#btn2').css('background-color','#EEEEEE');
            $('#btn3').css('background-color','#EEEEEE');
            $('#box4').css('display','block');
            $('#box6').css('display','none');
            $('#box8').css('display','none');
        });
        $('#btn2').click(function(){
            $('#btn1').css('background-color','#EEEEEE');
            $('#btn2').css('background-color','#fff');
            $('#btn3').css('background-color','#EEEEEE');
            $('#box4').css('display','none');
            $('#box6').css('display','block');
            $('#box8').css('display','none');
        });
        $('#btn3').click(function(){
            $('#btn1').css('background-color','#EEEEEE');
            $('#btn2').css('background-color','#EEEEEE');
            $('#btn3').css('background-color','#fff');
            $('#box4').css('display','none');
            $('#box6').css('display','none');
            $('#box8').css('display','block');
        });
        
        //内容摸态框调用
        $('.p1').click(function(){
            $('#myModal').modal('toggle');
            var content = $(this).html();
            $('#content').html(content);

            $.ajax({
                type:'post',
                url:"<{:U('news/status')}>",
                data:"content="+content+"",
                dataType:'json',
                success:function(){

                }
            })
        });

        //回复
        $('.p3').click(function(){
            var name = $(this).attr('name');
            $('#btn1').css('background-color','#EEEEEE');
            $('#btn2').css('background-color','#EEEEEE');
            $('#btn3').css('background-color','#fff');
            $('#box4').css('display','none');
            $('#box6').css('display','none');
            $('#box8').css('display','block');
            $('#name').val(name);
        })

        //删除
        function del(obj,id){
            $.ajax({
                type:'post',
                url:"<{:U('news/del')}>",
                data:"nid="+id+"",
                dataType:'json',
                success:function(){
                   $(obj).parent().parent().parent().parent().parent().remove();
                }
            })
        }
        
    </script>
  </body>
</html>